<template>
  <div>
       <mt-header fixed title="评论内容">
          <router-link to="/" slot="left"> 
            <mt-button icon="back">返回</mt-button>
          </router-link>
      </mt-header>
       
      <ul v-for="pinglun in new_pinglun" class="information">
          <li class="neirong">
              <div class="user_name">{{pinglun.n_name}}</div><br>
              <div class="user_message">{{pinglun.n_pinglun}}</div><br>             
          </li>
      </ul>
    <mt-field  placeholder="请输入昵称" type="textarea" rows="1" v-model='write_name'></mt-field>
    <mt-field  placeholder="请输入评论内容" type="textarea" rows="1" v-model='write_pinglun'></mt-field>
    <mt-button  plain size="large" type="default" @click="mtButtonSend(write_pinglun,write_name)">发送</mt-button>
  </div>
     
</template>   
<script>
    import { mapGetters } from 'vuex'
    import { mapState } from 'vuex'
    import { Toast } from 'mint-ui';
  export default {
          data () {
            return{             
                write_name:'',
                write_pinglun:''                                         
          }
         },
          computed:{
          ...mapState({ 
              new_pinglun: state => state.new_pinglun
          })
        },
        methods:{
          mtButtonSend(write_pinglun,write_name){
              if(this.write_pinglun!==''&&this.write_name!==''){
                this.$store.commit("addpinglun", {n_name:this.write_name,n_pinglun:this.write_pinglun})  
                Toast({message: '评论成功',iconClass: 'mintui mintui-success'});  
               this.write_pinglun='',
               this.write_name=''
               
             }                  
          }
        }  
  }
</script>
<style>
  .information{
        border:3px;
        font-size:15px; 
        margin:10px;
        border-bottom: 2px solid #ebf6f7;
      }
      .neirong{
        width: 100%;
      }
      .user_name{
        float: left;
        height: 5px;
      }
      
</style>